<template>
  <div class="navbar">
    <el-row>
      <el-col :span="6">
        <div class="grid-content nav-left" @click="toRouter()">
          <img :src="logoImg" alt />
          <h2>{{systemName}}</h2>
        </div>
      </el-col>
      <el-col :span="12">
        <el-row class="navbar-center" >
          <el-col :span="5">&nbsp;</el-col>
          <!-- 时间左侧 -->
          <el-col :span="5" class="navbar-center-left">
            <div class="content">
              <div class="contentDiv"></div>
            </div>
            <div class="content content2">
              <div class="contentDiv"></div>
            </div>
            <div class="content content3">
              <div class="contentDiv"></div>
            </div>
            <div class="content content4">
              <div class="contentDiv"></div>
            </div>
          </el-col>
          <!-- 时间 -->
          <el-col :span="4" class="navbar-time">
            <h2>{{this.time2}}</h2>
            <!-- <p>{{this.time}}</p> -->
          </el-col>
          <!-- 时间右侧 -->
          <el-col :span="5" class="navbar-center-right">
            <div class="content">
              <div class="contentDiv"></div>
            </div>
            <div class="content content2">
              <div class="contentDiv"></div>
            </div>
            <div class="content content3">
              <div class="contentDiv"></div>
            </div>
            <div class="content content4">
              <div class="contentDiv"></div>
            </div>
          </el-col>
          <el-col :span="5">&nbsp;</el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="grid-content nav-light">
          <ul>
            <li v-if="this.$route.path !== '/'">
                 <router-link to="/">
              <el-tooltip class="item" effect="dark" content="系统首页" placement="top-start">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-1" />
                </svg>
              </el-tooltip>
                 </router-link>
            </li>
            <li v-if="this.$route.path !== '/overview'">
                 <router-link to="/overview">
              <el-tooltip class="item" effect="dark" content="设备概览" placement="top-start">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-caidan" />
                </svg>
              </el-tooltip>
                 </router-link>
            </li>
            <li>
              <el-tooltip class="item" effect="dark" content="全屏" placement="top-start">
                <svg class="icon" aria-hidden="true" @click="toggleFullscreen">
                  <use xlink:href="#icon-quanping" />
                </svg>
              </el-tooltip>
            </li>
             <li v-if="this.$route.path == '/overview'">
                 <router-link to="/set">
              <el-tooltip class="item" effect="dark" content="系统设置" placement="top-start">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongshezhi" />
                </svg>
              </el-tooltip>
                 </router-link>
            </li>
            <li v-if="this.islogin !== '0'">
              <el-tooltip class="item" effect="dark" content="更改系统主题皮肤" placement="top-start">
                <svg class="icon" aria-hidden="true" @click="dialogVisible2 = true">
                  <use xlink:href="#icon-pifu" />
                </svg>
              </el-tooltip>
            </li>

            <li style="position: relative;">
               <router-link to="/warnSet">
              <el-tooltip class="item" effect="dark" content="报警信息" placement="top-start">
                <svg aria-hidden="true" :class="warstate ? 'icon war': 'icon'">
                  <use xlink:href="#icon-icon-alarm" />
                </svg>
              </el-tooltip>

              <span
                :class="warstate ? 'war_number war': 'war_number'"
              >{{warNumber > 0 ? warNumber :null }}</span>
               </router-link>
            </li>
            <li>
              <span v-if="this.loginName == ''">
                <el-tooltip class="item" effect="dark" content="登录" placement="top-start">
                  <svg class="icon" aria-hidden="true" @click="loginModal()">
                    <use xlink:href="#icon-denglu" />
                  </svg>
                </el-tooltip>
              </span>
              <span v-if="this.loginName !== ''">
                <span class="login_nameL overflowHidden">
                  {{this.loginName}}
                </span>
                
                <el-tooltip class="item" effect="dark" content="退出登录" placement="top-start">
                  <svg
                    class="icon"
                    aria-hidden="true"
                    @click="exitLogin()"
                    style="font-size:20px;margin-left:10px;"
                  >
                    <use xlink:href="#icon--" />
                  </svg>
                </el-tooltip>
              </span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>

    <!-- 登录模块 -->
    <el-dialog
      title="登录"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      :width="dialogWidth"
      :before-close="handleClose"
      :modal="true"
      class="login"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name" class="login_name">
          <!-- <el-input v-model="ruleForm.name"></el-input> -->
          <el-select v-model="ruleForm.name" filterable placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" @focus="focusInput()" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClose()" class="quxiao" size="medium">取消</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            size="medium"
            class="loginbutton"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 主题设置 -->
     <el-dialog
      title="主题设置"
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="60%"
      :modal="true"
      class="login"
    >
      <div class="skin_wrap">
        <div class="skin pifu2"  @click="choicePifu('bg1')">
            <img src="../../assets/bg5Avatars.jpg" alt="">
            <p>主题 1</p>
        </div>
         <div class="skin pifu2"  @click="choicePifu('bg3')">
            <div class="pifu1" style="background:#2a5879"></div>
            <p>主题 2</p>
        </div>
        <div class="skin pifu2"  @click="choicePifu('bg2')">
            <img src="../../assets/bg1Avatar.png" alt="">
            <p>主题 3</p>
        </div>
        <div class="skin pifu2"  @click="choicePifu('bg4')">
            <img src="../../assets/bg2Avatar.png" alt="">
            <p>主题 4</p>
        </div>
        <div class="skin pifu2"  @click="choicePifu('bg5')">
            <img src="../../assets/bg8Avatar.jpg" alt="">
            <p>主题 5</p>
        </div>
        <div class="skin pifu2"  @click="choicePifu('bg6')">
            <img src="../../assets/bg4Avatar.png" alt="">
            <p>主题 6</p>
        </div>
        <div class="skin pifu2"  @click="choicePifu('bg7')">
            <img src="../../assets/bg5Avatar.png" alt="">
            <p>主题 7</p>
        </div>
        <div class="skin"  @click="choicePifu('bg8')">
            <div class="pifu1" style="background:#243848"></div>
            <p style="line-height:33px">主题 8</p>
        </div>
        <div style="clear:both"></div>
      </div>
    </el-dialog>

    <!-- 软件到期提示 -->
     <el-dialog
      class="login"
      :append-to-body="true"
      title="安全警告"
      iconClass="el-icon-warning"
      :visible.sync="encryptVisible"
      width="40%"
      :show-close="false"
      top="25vh"
    >
      <div
        class="encry_wrap jgtan_right"
        style="line-height: 23px; color: #fff; font-size: 16px"
      >
        <el-form
          label-width="100px"
          class="demo-ruleForm"
        >
          
          <el-form-item label="主机编码：" class="syscode">
            <el-input v-model="sync.syscode" disabled ></el-input>
          </el-form-item>
          <el-form-item label="系统注册：">
            <el-input v-model="license" placeholder="请输入注册码"></el-input>
          </el-form-item>
        </el-form>
        <p>
          系统尚未激活或License已经过期，目前系统已经停止相关设备信息的监控功能，现场安全保障存在隐患，请及时联系厂家进行激活处理，否则发生一切安全事故由客户承担。
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="setLicense()"
          >确 认</el-button
        >
      </span>
    </el-dialog>
    <div class="window_tan" v-if="this.window">
      <div class="window_tan_k">
        <div class="window_tan_title">{{ this.windowData[0] }}</div>
        <div class="window_tan_nr">
          <p>{{ this.windowData[1] }}</p>
        </div>
        <el-button class="window_tan_btn" type="warning" @click="windowclose()">确 认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import cardDataJson from '../../../static/cardDataJson.json'
export default {
  data() {
    return {
      // indexPath:localStorage.getItem("当前主页"),
      sync:{},
      logoImg:'',
      systemName:'',
      warNumber:'',
      warstate:false,
      getSyncTime:'',
      dialogVisible: false, //登录弹框
      encryptVisible: false,//软件到期提示
      dialogVisible2: false, //主题切换弹框
      loginName: "", //当前登录用户名
      time: "2020/01/01", //日期
      time2: localStorage.getItem("time"), //时间
      stime:0,//温湿度曲线时间节点
      tempTime:"0",//曲线时间
      className: '', //系统主题
      show: 1,
      islogin: '', //判断登录状态
      dialogWidth: 0,//登录框的宽度自适应
      ruleForm: {
        name: "",
        password: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      userList:[],//用户列表
      window:false,//弹窗显示\
      windowData:[],
      license:'',
    };
  },
  created() {
    // this.stime = 0
    // localStorage.setItem('stime',JSON.stringify(this.stime))   
    this.$nextTick(() => {
      console.log('第一次加载页面')
      this.getSync()
      this.getSyncTime = setInterval(this.getSync, this.$store.state.requestTime);
    });
    this.getuserName();
    this.setDialogWidth();
    var body = document.getElementById('body');
    body.className = localStorage.getItem("pifu") == undefined ? 'bg1' : localStorage.getItem("pifu");
    this.Grade = localStorage.getItem("当前用户权限")
    var logo = localStorage.getItem('logo')
    if(logo == '{}' || logo == '' 
    || logo == undefined || logo == 'undefined'
    || logo == null || logo == 'null'){
        this.logoImg = require('../../assets/logo.png')
    } else{
        this.logoImg = localStorage.getItem('logo')
    }
    if(this.$route.path == '/'){
      this.getLogo();
    }
    if(localStorage.getItem('window') != undefined && localStorage.getItem('window') != null){
      console.log(JSON.parse(localStorage.getItem('window')))
      this.window = JSON.parse(localStorage.getItem('window')).show
      this.windowData = JSON.parse(localStorage.getItem('window')).window
    }
  },
  mounted() {
    window.onresize = () => {
        return (() => {
            this.setDialogWidth()
        })()
    }
    // 定时器开启
    var timer = setInterval(() => {
      this.getTime();
    }, 1000);
  },
  methods: {
    getLogo(){
      //logo
      var params = {
          "getlayout":"layout7",
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        localStorage.setItem('logo', res.data.layout7)
        if(res.data.layout7 == '{}' || res.data.layout7 == '' 
        || res.data.layout7 == undefined || res.data.layout7 == 'undefined'
        || res.data.layout7 == null || res.data.layout7 == 'null'){
            this.logoImg = require('../../assets/logo.png')
        } else{
            this.logoImg = localStorage.getItem('logo')
        }
      })
    },
    // 接口暂停方法
      stopSync() {
        clearInterval(this.getSyncTime);
        this.getSyncTime = null;
        console.log('暂停sync')
      },
      // 重新走接口
      getDataStart () {
        this.stopSync(); // 清除旧的定时器
        console.log('开始sync')
        this.$nextTick(() => {
          this.getSyncTime = setInterval(this.getSync, this.$store.state.requestTime);
        });
      },
    // 判断设备
      _isMobile() {
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
        return flag;
      },
    //路由跳转
    toRouter(val){
        // if(this.$route.path == val){
        //     // window.location.reload()
        // }else{
        //     this.$router.push({
        //         path:val
        //     })
        // }
        this.$router.push({'path':'/'});
    },
     //登录框宽度适配
    setDialogWidth() {
        //console.log(document.body.clientWidth)
        var val = document.body.clientWidth
        const def = 1024 // 默认宽度
        if (val <= def) {
            this.dialogWidth = '50%'
        } else {
            this.dialogWidth = '30%'
        }
    },
    //关闭弹框
    windowclose(){
      this.window = false
      var win = {
        show:false,
        window:[],//弹窗出现的标题和内容
      }
      localStorage.setItem("window", JSON.stringify(win));
      // localStorage.setItem("window", "false");
    },
    // 全屏
    toggleFullscreen() {
      console.log('全屏')
      if (!document.fullscreenElement && !document.webkitFullscreenElement) {
        // Enter fullscreen mode
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.webkitRequestFullscreen) { // Chrome等浏览器
          document.documentElement.webkitRequestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) { // Firefox
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
          document.documentElement.msRequestFullscreen();
        }
      } else {
        // Exit fullscreen mode
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
    },
    focusInput(){},
    //获取报警信息 getSync 接口 包含 alarm/gprs/license/setpointer
    getSync() { 
      //获取当前时间
      // const now2 = new Date();
      // const hours2 = now2.getHours();
      // const minutes2 = now2.getMinutes();
      // const seconds2 = now2.getSeconds();
      // console.log('sync方法开始：'+hours2+':'+minutes2+':'+seconds2)
      if(localStorage.getItem('stime')== null || 
        localStorage.getItem('stime')== undefined ||
        localStorage.getItem('stime') == 'null' ||
        localStorage.getItem('stime') == 'undefined'){
        this.stime = 0
      }else{
        this.stime = JSON.parse(localStorage.getItem('stime'))
        if(JSON.parse(localStorage.getItem('stime')) == null ||
          JSON.parse(localStorage.getItem('stime')) == undefined ||
          JSON.parse(localStorage.getItem('stime')) == 'null' ||
          JSON.parse(localStorage.getItem('stime')) == 'undefined'){
            this.stime = 0
        }
      }
      
      if(localStorage.getItem('_token') == '0' ||
       localStorage.getItem('_token') == null ||
       localStorage.getItem('_token') == undefined||
       localStorage.getItem('_token') == 'null' ||
       localStorage.getItem('_token') == 'undefined'){
          var params = {
            "sync":{"gtime":this.stime},
          }
      }else{
        var params = {
          "sync":{"gtime":this.stime},
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
        }
      }
      
      this.getuserName()//获取登录状态
      this.$http.post(this.$baseUrl, params).then((res)=>{
        this.sync = res.data
        // 时间的拿取处理
        localStorage.setItem("当前时间戳", this.sync.time)
          //软件到期提醒
        if(this.sync.licenselimit == 1){//1到期  0未到期
          this.encryptVisible = true
        }else{
          this.encryptVisible = false
        }
        if(localStorage.getItem('window') != undefined && localStorage.getItem('window') != null){
          this.window = JSON.parse(localStorage.getItem('window')).show
          this.windowData = JSON.parse(localStorage.getItem('window')).window
        }
        // 获取页面是否进入息屏
        // res.data.active = {
        //   "ip":"all",//localhos或空值代表区域控制器执行，all代表所有页面都执行
        //  "window":["标题","内容"],//弹窗出现的标题和内容
        //   "screen":"on"      //off代表息屏，前端界面显示1张黑图片  触碰屏幕解除息屏   on代表解除息屏
        // }
        // // window.location.hostname   ip
        //息屏和弹窗的判断
        if(res.data.active != undefined && res.data.active != undefined){//判断active字段是否存在
          if(res.data.active.screen != null && res.data.active.screen != undefined){//判断息屏状态是否存在
            localStorage.setItem('screen',res.data.active.screen)  
          }
          if(res.data.active.window != null && res.data.active.window != undefined){
            if(res.data.active.ip == 'localhost'){//只在区域控制器显示
              if(window.location.hostname == '127.0.0.1'){
                this.window = true
                this.windowData = res.data.active.window
                var win = {
                  show:true,
                  window:res.data.active.window,//弹窗出现的标题和内容
                }
                localStorage.setItem("window", JSON.stringify(win));
                // localStorage.setItem("window", "true");
              }
            }else if(res.data.active.ip == 'all'){//所有访问客户端都显示
              this.window = true
              this.windowData = res.data.active.window
              var win = {
                show:true,
                window:res.data.active.window,//弹窗出现的标题和内容
              }
              localStorage.setItem("window", JSON.stringify(win));
              // localStorage.setItem("window", "true");
            }
          }
        }
        // 账号失效判断
        if(res.data.cookie == "error"){
          localStorage.setItem("_token", "0");
          localStorage.setItem("_username", "");
          localStorage.setItem("当前用户权限","游客");
          console.log('账号cookie已失效')
          this.$router.push({
            path: "/",
          });
          this.$notify.info({
              title: '账号已失效',
              duration: 1500
          });
          
        }
        // this.time2 = this.formatDate(data.time, 'H:m')
        // this.time2 = this.formatDate(data.time * 1000, 'H:m')
        // localStorage.setItem("time", this.time2)
        // data.temp = 33.3333333
        //曲线数据处理后储存到缓存中
        var data = res.data;
        var tempCurve = JSON.parse(localStorage.getItem("tempCurve"));//从缓存中找放温湿度平均值和当前时间的数组
        if(tempCurve == null || this.stime == 0){//第一次进系统没有该缓存时，手动新建数组模板
          tempCurve = {'wen':[],'shi':[],'yTime':[]}
          tempCurve['wen'] = new Array(480).fill(0);//温度数组
          tempCurve['shi'] = new Array(480).fill(0);//湿度数组
          tempCurve['yTime'] = new Array(480).fill('0');//y轴时间数组
        }
        this.temp = data.temp == null ? 0 : data.temp.toFixed(2);
        this.humi = data.humi == null ? 0 : data.humi.toFixed(2);
        this.stime = data.gtime //温湿度时间节点保存
        // console.log(this.stime)
        localStorage.setItem('stime',JSON.stringify(data.gtime))   
        localStorage.setItem('navbar',JSON.stringify(res.data))   
        this.systemName = data.name;
        this.warNumber = data.alarm;
        this.warstate = data.alarmstate;
        //曲线时间戳处理成时间
        if(data.record.length != 0 ){
          for(var w = 0; w < data.record.length; w++){
            // var qutime =new Date(parseInt(data.record[w].time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
            // var ytime2 = qutime.split("午")[1]
            var qutime = new Date((data.record[w].time)* 1000)
            var year = qutime.getFullYear();
            var month = qutime.getMonth() + 1;
            var day = qutime.getDate();
            var hour = qutime.getHours();
            var minute = qutime.getMinutes() < 10 ? '0' + qutime.getMinutes() : qutime.getMinutes();
            var ytime2 = year + '/' + month + '/' + day + ' ' + hour + ":" + minute
            // var ytime2 = hour
            //温度
            tempCurve['wen'].shift();//删去湿度数组中的第一个值
            // console.log(data.record[w].temp)
            tempCurve['wen'].push(parseFloat(data.record[w].temp) > 35 ? 35 : (parseFloat(data.record[w].temp) < 5 ? 5 : parseFloat(data.record[w].temp.toFixed(2))) )//将新获得的湿度平均值放进湿度数组
            // tempCurve['wen'].push(25)//将新获得的湿度平均值放进湿度数组
            //湿度
            tempCurve['shi'].shift();//删去湿度数组中的第一个值
            // tempCurve['shi'].push(parseFloat(data.record[w].humi.toFixed(2)))//将新获得的湿度平均值放进湿度数组
            tempCurve['shi'].push(parseFloat(data.record[w].humi) > 80 ? 80 : (parseFloat(data.record[w].humi) < 20 ? 20 : parseFloat(data.record[w].humi.toFixed(2))))//将新获得的湿度平均值放进湿度数组
            // tempCurve['shi'].push(35)//将新获得的湿度平均值放进湿度数组
            //时间
            tempCurve['yTime'].shift();//删去湿度数组中的第一个值
            tempCurve['yTime'].push(ytime2)//将新获得的湿度平均值放进湿度数组
          }
          localStorage.setItem("tempCurve", JSON.stringify(tempCurve));
        }
        //获取当前时间
        // const now = new Date();
        // const hours = now.getHours();
        // const minutes = now.getMinutes();
        // const seconds = now.getSeconds();
        // console.log('sync返回处理结束'+hours+':'+minutes+':'+seconds)
      })
    },
    //license注册
    setLicense(){
      if(this.license == ''){
        this.$notify({
            title: '当前系统尚未激活，请输入注册码',
            type: 'warning',
            duration: 1500
        });
        return false
      }
      var params = {
        "setlicense":this.license,//注册码
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
          if(res.data.result == 'ok'){
            this.$notify({
                title: '验证成功',
                type: 'success',
                duration: 1500
            });
            setTimeout(()=>{
              this.encryptVisible = false
              this.license = ''
            },1000)
            
          }else{
            this.$notify({
                title: '验证失败',
                type: 'warning',
                duration: 1500
            });
          }
      });
    },
    // 时间同步
    synctime(){
        // localStorage.setItem("systemTime", res.data.ntime);
        let time =  Date.parse(new Date())/1000;
        var paramsTime = {
          "settime":time,//时间戳，单位秒
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
        }
        this.$http.post(this.$baseUrl, paramsTime).then((res) => {
            if(res.data.result !== 'ok'){
            }else{
            }
        }); 
    },
    // 打开登录弹窗
    loginModal() {
      this.Grade = localStorage.getItem("当前用户权限")
      if(this.Grade == '首次进入'){
        this.$notify({
            title: '当前系统无账号信息，请先建立账号',
            type: 'warning',
            duration: 1500
        });
        return false;
      }else{
        // 获取用户列表
        this.$http.post(this.$baseUrl,{
            "getuserlist":"",
        }).then((res)=>{
          var list = []
          for(var i = 0; i < res.data.getuserlist.length;i++){
            if(res.data.getuserlist[i].limit != 'thirdparty'){
              list.push(
              {name:res.data.getuserlist[i].name}
            )
            }
          }
          this.userList = list
        })
        this.dialogVisible = true;
        if(this.dialogVisible == true) {
          this.stopSync();
        }
      }
      
    },
    // 关闭登录弹窗
    handleClose() {
      this.dialogVisible = false;
      this.getDataStart();
       
    },
    // 获取用户名登录状态
    getuserName() {
      if(localStorage.getItem("当前用户权限" == '游客')){}
      if( localStorage.getItem("_username") == undefined || localStorage.getItem("_username") == null){
        this.loginName = '';
      }else{
        this.loginName = localStorage.getItem("_username");
      }
    },
    // 登录逻辑
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var params = {
            "login":{
              "acc":this.ruleForm.name,
              "pwd":this.ruleForm.password
            }
          }
          console.log(params)
          this.$http.post(this.$baseUrl, params).then((res) => {
            if(res.data.result == 'ok' ){
              this.$notify({
                  title: '登录成功',
                  type: 'success',
                  duration: 1500,
              });
              this.synctime()
              localStorage.setItem("_token", res.data.cookie);
              localStorage.setItem("_username", this.ruleForm.name);
              this.$store.commit("changeUserName", this.ruleForm.name);
              if(res.data.limit == 'all'){
                localStorage.setItem("当前用户权限", '高级管理员')
              }else if(res.data.limit == 'administrators'){
                localStorage.setItem("当前用户权限", '普通管理员')
              }else if(res.data.limit == 'tourist'){
                localStorage.setItem("当前用户权限", '普通用户')
              }else if(res.data.limit == 'thirdparty'){
                localStorage.setItem("当前用户权限", '第三方用户')
              }
              this.loginName = this.ruleForm.name
              this.dialogVisible = false;
              this.getDataStart()
            }else if(res.data.result == 'acc or pwd error'){
              this.$notify({
                title: '用户名或密码不正确',
                type: 'warning',
                duration: 1500
              });
            }else{
              this.$notify({
                title: '登录失败，数据接口错误',
                type: 'warning',
                duration: 1500
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 退出登录
    exitLogin() {
      localStorage.setItem("_token", "0");
      localStorage.setItem("_username", "");
      localStorage.setItem("当前用户权限","游客");
      console.log('手动退出登录')
      this.$router.push({
        path: "/",
      });
       this.$notify.info({
          title: '已退出登录',
          duration: 1500
        });
      
    },
    // 系统时间
    getTime() {
      var time = this.formatDate(localStorage.getItem('当前时间戳')* 1000, 'YYYY-MM-DD') 
      localStorage.setItem("日期",time)
      this.time2 = this.formatDate(localStorage.getItem('当前时间戳')* 1000, 'H:m') 
      localStorage.setItem("time",this.time2)
    },
    //主题选择
    choicePifu(e) {
      var body = document.getElementById('body');
      body.className = e;
      localStorage.setItem("pifu", e)
    },
    //温湿度曲线缓存
    getTemp() {
      var tempCurve = JSON.parse(localStorage.getItem("tempCurve"));//从缓存中找放温湿度平均值和当前时间的数组
      if(tempCurve == null){//第一次进系统没有该缓存时，手动新建数组模板
        tempCurve = {'wen':[],'shi':[],'yTime':[]}
        tempCurve['wen'] = new Array(480).fill(0);//温度数组
        tempCurve['shi'] = new Array(480).fill(0);//湿度数组
        tempCurve['yTime'] = new Array(480).fill('0');//y轴时间数组
      }
      tempCurve['wen'].shift();//删去温度数组中的第一个值
      tempCurve['wen'].push(this.temp)//将新获得的温度平均值放进温度数组
      // --------------------
      tempCurve['shi'].shift();//删去湿度数组中的第一个值
      tempCurve['shi'].push(this.humi)//将新获得的湿度平均值放进湿度数组
      // --------------------
      tempCurve['yTime'].shift();//删去y轴时间数组中的第一个值
      tempCurve['yTime'].push(this.tempTime)//将新获得的y轴时间数组
      localStorage.setItem("tempCurve", JSON.stringify(tempCurve));
    } 
  },
  // 清除定时器
  beforeDestroy() {
    console.log('导航组件销毁')
    this.stopSync();
  },
};
</script>

<style scoped>
/deep/ .el-row{
  position: static;
}
.navbar {
  margin-top: 10px;
  height: 55px;
  line-height: 55px;
  /* padding: 0px 20px; */
  /* background: rgba(255,255,255, .1) */
  color: #fff;
}
.nav-light {
  text-align: right;
  display: inline-block;
  width: 100%;
  border-left: 4px solid #42a3ca;
  border-right: 4px solid #42a3ca;
  background-image: linear-gradient(
    to right,
    rgba(66, 163, 202, 0.4) 0%,
    rgba(66, 163, 202, 0) 11%,
    rgba(66, 163, 202, 0) 91%,
    rgba(66, 163, 202, 0.4) 100%
  );
}
.nav-left {
  display: inline-block;
  width: 100%;
  border-left: 4px solid #42a3ca;
  border-right: 4px solid #42a3ca;

  background-image: linear-gradient(
    to right,
    rgba(66, 163, 202, 0.4) 0%,
    rgba(66, 163, 202, 0) 11%,
    rgba(66, 163, 202, 0) 91%,
    rgba(66, 163, 202, 0.4) 100%
  );
}
.nav-left:hover{
  cursor: pointer;
}
.nav-left img {
  display: inline-block;
  margin-right: 10px;
  float: left;
  height: 50px;
  max-width: 160px;
  margin-top: 2.5px;
}
.nav-left h2 {
  display: inline-block;
  font-weight: normal;
  font-family: "隶书";
  margin: 0px;
  padding: 0px;
  float: left;
  font-size: 21px;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
}
.nav-light ul {
  padding: 0;
  margin: 0;
  display: inline-block;
  float: right;
}
.nav-light ul li {
  width: 65px;
  float: left;
  list-style: none;
  text-align: center;
}
.nav-light ul li .icon {
  font-size: 26px;
}
.nav-light ul li:hover {
  cursor: pointer;
}
.navbar-center {
  text-align: center;
}
.content {
  transform: skewX(45deg);
  width: 30px;
  height: 6px;
  background: #42a3ca;
  float: right;
  margin: 25px 2px;
}
.content > div {
  transform: skewX(-45deg);
}
.navbar-center-right .content {
  transform: skewX(-45deg);
}
.navbar-center-right .content > div {
  transform: skewX(45deg);
}
.content2 {
  background: rgba(66, 163, 202, 0.8);
}
.content3 {
  background: rgba(66, 163, 202, 0.6);
}
.content4 {
  background: rgba(66, 163, 202, 0.4);
}
.navbar-center-right > div {
  float: left;
}
.navbar-time {
  font-size: 30px;
  text-align: center;
}
.navbar-time h2 {
  font-weight: 400;
}
.navbar-time p {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
}

/* 动画 */
.nav-light ul > li .icon.war {
  transition: 0.3;
  animation: mycolor infinite 1s;
  /* color: red !important; */
}
.nav-light ul > li .war_number.war {
  transition: 0.3;
  animation: mycolor infinite 1s;
  /* color: red !important; */
}

@keyframes mycolor {
  0% {
    color: #fff;
  }
  50% {
    color: red;
  }
  100% {
    color: #fff;
  }
}
.war_number {
  position: absolute;
  top: -12px;
  font-size: 16px;
  font-weight: 500;
}

/* 登录 */
/deep/ .el-dialog {
  background: rgba(79, 112, 151, 0.4) !important;
  margin-top: 100px !important;
}
/deep/.login .el-dialog__header {
  background: rgba(0, 0, 0, 0.2);
  color: #fff !important;
}
/deep/.login .el-dialog__header .el-dialog__title {
  color: #fff !important;
}
/deep/ .el-form-item__label {
  color: #fff !important;
}
/deep/ .el-input__inner {
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 80%;
  color: #fff;
}
/deep/ .login_name .el-input__inner {
  width: 100%;
}
/deep/ .login_name .el-select{
  width: 80%;
}
/deep/ .quxiao {
  background: none;
  color: #ececec;
  border: 1px solid #898c94;
}
/deep/ .quxiao:hover {
  color: #fff;
  background: rgba(79, 112, 151, 0.6);
  border: 1px solid #fff;
}
/deep/ .loginbutton {
  background: rgba(79, 112, 151, 0.6);
  color: #fff !important;
  border: 1px solid rgba(79, 112, 151, 0.6);
}
/deep/ .loginbutton:hover {
  background: rgba(79, 112, 151, 1);
  border: 1px solid rgba(79, 112, 151, 1);
  color: rgba(79, 112, 151, 1);
}

/* 系统主题设置 */
.pifuContent p{
  text-align: center;
  color: #fff;
  line-height: 30px;
  color: #ececec;
}
.pifu{
  width: 130px;
  height: 100px;
  margin: 0 auto;
}
.pifu:hover{
  cursor: pointer;
}
.pifu img{
  width: 100%;
  height: 100%;
}
.pifu1{
  background: #243848;
  height: 100%;
  width: 100%;
}
/* 弹框缩放样式 */
/deep/ .el-dialog{
    transform: none !important;
}
/* 皮肤弹窗 */

.skin_wrap .skin{
    width: 25%;
    float: left;
    height: 160px;
    padding: 30px;
    position: relative;
}
.skin_wrap .skin p{
    color: #fff;
    text-align: center;
    line-height: 28px;
}
.skin_wrap .skin img{
    width: 100%;
    height: 100%;

}
@media screen and (max-width: 1024px){
    .skin_wrap .skin{
        width: 33.33333%;
        height: 110px;
        padding: 10px;
    }
    /deep/ .el-dialog__body{
      padding-top: 10px !important;
    }
    /deep/ .el-form-item__label{
      width: 65px !important;
    }
    /deep/ .el-form-item__content{
      margin-left: 65px !important;
    }
    /deep/  .el-dialog  {
      margin-top: 15vh !important;
    }
}
.login_nameL{
    width: 105px;
    display: block;
    float: left;
}
.nav-light ul li:last-child{
  width: 140px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
}
/* license弹框 */
/deep/ .syscode .el-input.is-disabled .el-input__inner{
  width: 100px;
  background: #0000001f;
  border: 1px solid #ffffff4d;
  color: #fff;
  text-align: center;
}
/* 信息弹框 */
.window_tan{
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.window_tan_k{
  width: 600px;
  min-height: 300px;
  background: #677591 !important;
  z-index: 3;
  border-radius: 10px;
  box-shadow: 2px 2px 27px #0000006b;
  border: 1px solid #a2a2a24d;
}
.window_tan_title{
  background: rgba(0, 0, 0, 0.2);
  padding: 0px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 20px;
}
.window_tan_nr{
  min-height: 180px;
  font-size: 22px;
  padding: 20px 30px;
}
.window_tan_nr p{
  text-indent: 30px; /* 这里的值可以调整首行缩进的大小 */
}
.window_tan_btn{
  float: right;
  margin-right: 30px;
}
</style>